﻿<Page
    x:Class="Estela.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Estela"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="FlyoutPresenterStyle1" TargetType="FlyoutPresenter">
            <Setter Property="RequestedTheme" Value="Light"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Background" Value="{ThemeResource FlyoutBackgroundThemeBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}"/>
            <Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}"/>
            <Setter Property="Padding" Value="{ThemeResource FlyoutContentThemePadding}"/>
            <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}"/>
            <Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/>
            <Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}"/>
            <Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}"/>
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="FlyoutPresenter">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="-346,0,-350,0">
                            <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="FontFamily" Value="Global User Interface"/>
            <Setter Property="Height" Value="Auto"/>
        </Style>
        <MediaElement x:Name="mediaElement"/>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Teclado -->
        <Grid Name="teclado">
            <FlyoutBase.AttachedFlyout>
                <Flyout x:Name="flyout" Placement="Full" FlyoutPresenterStyle="{StaticResource FlyoutPresenterStyle1}">
                    <Grid x:Name="tecladoAmpliado">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                    </Grid>
                </Flyout>
            </FlyoutBase.AttachedFlyout>
        </Grid>

        <!-- Menú inferior -->
        <Grid Grid.Row="1">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" Background="Red">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <Button Grid.Column="0" Click="Hablar_Click">
                        <TextBlock FontSize="{Binding Source={StaticResource Configuración}, Path=TamañoTeclas}">Hablar</TextBlock>
                    </Button>
                    <Button Grid.Column="1" Click="Deshacer_Click">
                        <TextBlock FontSize="{Binding Source={StaticResource Configuración}, Path=TamañoTeclas}">Deshacer</TextBlock>
                    </Button>
                    <Button Grid.Column="2" Click="Espacio_Click" HorizontalAlignment="Stretch">
                        <TextBlock FontSize="{Binding Source={StaticResource Configuración}, Path=TamañoTeclas}">Espacio</TextBlock>
                    </Button>
                    <Button Grid.Column="3" Click="BorrarTodo_Click">
                        <TextBlock FontSize="{Binding Source={StaticResource Configuración}, Path=TamañoTeclas}">Borrar todo</TextBlock>
                    </Button>
                </Grid>
                <TextBlock Grid.Row="1" TextWrapping="Wrap" Foreground="White" x:Name="mensaje" FontSize="{Binding Source={StaticResource Configuración}, Path=TamañoFuente}"/>
            </Grid>
        </Grid>
    </Grid>
</Page>
